<template>
<div class="c-page">
  <div class="title">生产计划</div>
  <div class="plan">
    <div class="item">
      <span>计划:</span>
      <span>27/6项</span>
      <span>562/27件</span>
    </div>
    <div class="item">
      <span>完成:</span>
      <span>23/6项</span>
      <span>562/27件</span>
    </div>
  </div>
  <div class="list-table" ref="listTable">
    <div class="show-list-item">
      <div class="row">202009087</div>
      <div class="row">低压电器柜</div>
      <div class="row">D180*220*80</div>
      <div class="row">80</div>
      <div class="row">10/18</div>
      <div class="row">250</div>
      <div class="row">10/19</div>
    </div>

    <div class="show-list-item">
      <div class="row">202009087</div>
      <div class="row">低压电器柜</div>
      <div class="row">D180*220*80</div>
      <div class="row">80</div>
      <div class="row">10/18</div>
      <div class="row">250</div>
      <div class="row">10/19</div>
    </div>
    <div class="show-list-item">
      <div class="row">202009087</div>
      <div class="row">低压电器柜</div>
      <div class="row">D180*220*80</div>
      <div class="row">80</div>
      <div class="row">10/18</div>
      <div class="row">250</div>
      <div class="row">10/19</div>
    </div>
    <div class="show-list-item">
      <div class="row">202009087</div>
      <div class="row">低压电器柜</div>
      <div class="row">D180*220*80</div>
      <div class="row">80</div>
      <div class="row">10/18</div>
      <div class="row">250</div>
      <div class="row">10/19</div>
    </div>
    <div class="show-list-item">
      <div class="row">202009087</div>
      <div class="row">低压电器柜</div>
      <div class="row">D180*220*80</div>
      <div class="row">80</div>
      <div class="row">10/18</div>
      <div class="row">250</div>
      <div class="row">10/19</div>
    </div>
    <div class="show-list-item">
      <div class="row">202009087</div>
      <div class="row">低压电器柜</div>
      <div class="row">D180*220*80</div>
      <div class="row">80</div>
      <div class="row">10/18</div>
      <div class="row">250</div>
      <div class="row">10/19</div>
    </div>
    <div class="show-list-item">
      <div class="row">202009087</div>
      <div class="row">低压电器柜</div>
      <div class="row">D180*220*80</div>
      <div class="row">80</div>
      <div class="row">10/18</div>
      <div class="row">250</div>
      <div class="row">10/19</div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return { }
  },
  mounted() {
    console.log(this.$refs.listTable, 'list')
  }
}
</script>

<style lang="less" scoped>
.c-page {
  width: 100%;
  height: 100%;
  padding: 5px;
  cursor: pointer;
  display: flex;
  flex-flow: column;

  .title {
    border-left: 3px solid #1CB9FC;
    padding: 5px;
    text-align: left;
    font-size: 14px;
    width: 40%;
    background-image: linear-gradient(to right, #1CB9FC, #050D3E);
  }

  .plan {
    color: #2ED1E0;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    margin: 5px 0;

    .item {
      flex: 1;

      span {
        margin-left: 2px;
      }
    }
  }

  .list-table {
    flex: 1;
    width: 100%;
    overflow: hidden;

    .show-list-item:hover {
      cursor: pointer;
      background: #1485B4;
    }
  }

  .show-list-item {
    display: flex;
    font-size: 13px;
    margin: 4px 0;

    .row {
      flex: 1;
    }

    .row:nth-child(2) {
      flex: 2;
    }
  }
}
</style>
